
<script>
    let id = "";
    
    /** @type {import('./$types').PageData} */
    export let data;

    console.log(data);
    
    
  let msg = "";
  let copyPromise = null;
  let timer = 0;
  
  function copy() {
    copyPromise = navigator.clipboard.writeText(data.reqJson.Content);
    timer = 3;
    setTimeout(function() {
      for (; timer >= 0 ; timer --);
      return
    }, 1000)
  }
</script>

<h2>ID: {data.id}</h2>

{#if timer > 0}
{#await copyPromise}
{:then}
  <p>
    Successfully copied!
  </p>
{:catch error}
  <p>
    Failed to copy: {error}
  </p>
{/await}
{/if}

<button on:click={copy}>Copy to clipboard!</button>

<pre id="content" class="code">{data.reqJson.Content}</pre>


<style>
/* TODO: Figure out why the styles don't get propagated down here
 from the +layout up above */
.code {
  color: #000;
  background-color: #FFFFEA;
  display: block;
  padding: 10px;
  border: 1px solid;
  line-height: 1.1;
  overflow: auto;
  border: 1px solid;
  padding: 2px;
  font-size: .8em;
  font-family: "Roboto Mono", "Monaco", "Lucida Console", "DejaVu Sans Mono", "monospace";
}


</style>